<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar title="公司详情" titleColor="#fff"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="user">
				<view class="user-picdir">
					<image :src="baseImage + detail.picdir" mode="" v-if="detail.picdir"></image>
					<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
				</view>
				<view class="user-info">
					<view class="user-line">
						<view class="user-name">
							{{detail.title}}
						</view>
						<!-- TODO 暂无认证 -->
						<view class="user-status">
							已认证
						</view>
					</view>
					<view class="user-biref">
						<text>行业：{{detail.hangye}}</text>
						<text>规模：{{detail.guimo}}</text>
					</view>
					<view class="user-tags" v-if="detail.tip">
						<view class="user-tag" v-for="(item,index) in detail.tip.split(',')">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-title">联系方式</view>
				<view class="item-info-box">
					<view class="item-info addr">
						<view class="item-info-label">
							公司地址：
						</view>
						<view class="item-info-value">
							<text>{{`${detail.city} ${detail.addr}`}}</text>
							<text class="copy"
								@click="copy(`${detail.city} ${detail.addr}`)">点击复制</text>
						</view>
					</view>
				</view>

			</view>
			<view class="item">
				<view class="item-title">公司简介</view>
				<view class="item-info-box">
					<view class="item-info contentVisible" :class="{'expanded': isExpandedJob }">
						<text>{{detail.description}}</text>
					</view>
				</view>
				<view class="item-more" :class="isExpandedJob? 'rorate':''" @click="expandedChange('isExpandedJob')">
					<van-icon name="arrow-down" color="#999" />
				</view>
			</view>
			<view class="item" v-for="item in dataList" :key="item.id" @click="toDetail(item)">
				<view class="item-main">
					<view class="item-line">
						<view class="item-title">
							{{item.title}}
						</view>
						<view class="item-price">
							{{item.isMianyi==1?"面议":Math.floor(item.workSalary)+(item.workDanwei?item.workDanwei:"元/天")}}
						</view>
					</view>
					<view class="item-line">
						<text>{{item.gangwei}}</text>
						<text>{{item.workType}}</text>
					</view>
					<view class="item-tag" v-if="item.tip">
						<view v-for="tag in item.tip.split(',')">{{tag}}</view>
					</view>
					<view class="item-date" v-if="item.timeCreate">
						{{item.timeCreate.split(" ")[0]}}
					</view>
				</view>

				<view class="item-bottom">
					<view class="item-user">
						<view class="item-user-picdir">
							<image :src="baseImage + detail.picdir" mode="" v-if="detail.picdir"></image>
							<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
						</view>
						<view class="item-user-name">
							{{detail.title}}
						</view>
					</view>
					<view class="item-address">
						{{`${item.city.includes('/')? item.city.split('/')[2]:item.city}`}}
					</view>
				</view>
			</view>

		</view>
		<view class="main-bj">
			<image :src="imgUrl + 'qiuzhiPostDetailBj.png'"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {
		companyDetail
	} from "@/core/web-api/qiuzhiduan.js"
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				isExpandedJob: false,
				isExpandedWork: false,
				detail: {},
				bottomBtnHeight: uni.upx2px(90),
				dataList: [],
				id: "",
			}
		},
		methods: {
			/**
			 * 跳转详情
			 */
			toDetail({id}){
				uni.navigateTo({
					url:"/pages/web/gangweiDetail?id=" + id
				})
			},
			
			expandedChange(type) {
				this[type] = !this[type]
			},
			
			/**
			 * 赋值
			 */
			copy(value){
				console.log(value)
				uni.setClipboardData({
					data:value,
					success() {
						uni.showToast({
							title:"复制成功",
							icon:"success"
						})
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title:"复制失败",
							icon:"none"
						})
					}
				})
			},

			/**
			 * 获取企业详情
			 */
			getCompany() {
				companyDetail({
					id: this.id
				}).then(res => {
					if (res.code == 20000) {
						const {
							detail,
							list
						} = res.data;
						this.detail = detail;
						this.dataList = list;
					}
				})
			},
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage','imgUrl','usual']),
		},
		onLoad(options) {
			this.id = options.id;
			this.getCompany();
		}
	}
</script>

<style scoped lang="less">
	.contentVisible {
		overflow: hidden;
		transition: all 2s ease;
		height: 200upx;
		/* 初始高度，设置为展示一半的内容 */
		padding: 0;

		text {
			display: -webkit-box;
			-webkit-line-clamp: 5;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			/* 隐藏超出部分 */
		}
	}

	/* 扩展状态的样式 */
	.contentVisible.expanded {
		height: auto;

		text {
			display: -webkit-box;
			-webkit-line-clamp: unset;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			/* 隐藏超出部分 */
		}

		/* 展开后自动调整高度 */
	}

	/* 可选的文本样式 */
	.text {
		margin: 0;
	}


	.user {
		width: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 40upx;

		&-picdir {
			width: 124upx;
			height: 124upx;
			border-radius: 50%;
			border: 2upx solid #fff;

			image {
				width: 124upx;
				height: 124upx;
			}
		}

		&-info {
			margin-left: 10upx;
			padding-top: 20upx;
		}

		&-line {
			padding-left: 15upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}

		&-name {
			font-size: 34upx;
			color: #ffffff;
			margin-right: 20upx;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-status {
			width: 104upx;
			height: 33upx;
			text-align: center;
			line-height: 33upx;
			border-radius: 16.5upx;
			background-color: #e7b998;
			text-align: center;
			line-height: 33upx;
			font-size: 20upx;
			color: #302c29;
		}

		&-biref {
			width: 100%;
			padding-left: 15upx;
			box-sizing: border-box;
			margin-top: 20upx;

			text {
				font-size: 23upx;
				color: #d1eff5;
				margin-right: 15upx;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		&-tag {
			width: 135upx;
			height: 48upx;
			border-radius: 19upx;
			background-color: rgba(255, 255, 255, .2);
			margin-right: 30upx;
			font-size: 25upx;
			color: #fff;
			text-align: center;
			line-height: 48upx;

			&:last-child {
				margin-right: 0;
			}

			&s {
				margin-top: 35upx;
				display: flex;
				flex-flow: wrap;
			}
		}
	}

	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 500upx;
			position: fixed;
			left: 0;
			top: -80upx;
			z-index: -1;

			image {
				width: 100%;
				height: 100%;
			}
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;

			&-update {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 276upx;
				color: #666666;
			}

			&-open {
				width: 477upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}
	}

	.content {
		width: 100%;
		margin-top: 30upx;
	}

	.item {
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 30upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		position: relative;

		&:last-child {
			margin-bottom: 0;
		}

		&-more {
			width: 100%;
			display: flex;
			justify-content: center;

			&.rorate {
				transform: rotate(180deg);
			}
		}

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			&:last-child {
				margin-bottom: 0;
			}

			text {
				font-size: 26upx;
				color: #666666;
				display: block;
				height: 26upx;
				line-height: 26upx;

				&:nth-child(2) {
					padding-left: 10upx;
					margin-left: 10upx;
					border-left: 2upx solid #666;
				}
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-price {
			font-size: 30upx;
			color: #0180ff;
		}

		&-tag {
			display: flex;
			flex-flow: wrap;
			margin-top: 15upx;

			view {
				font-size: 20upx;
				color: #333333;
				height: 38upx;
				padding: 0 14upx;
				border-radius: 19upx;
				background-color: #d0e0fd;
				margin-right: 20upx;
				line-height: 38upx;
			}
		}

		&-bottom {
			width: 100%;
			display: flex;
			margin-top: 25upx;
			padding: 30upx 0upx 0 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 2upx solid #f8f8f8;
		}

		&-main {
			position: relative;
		}

		&-address {
			font-size: 20upx;
			color: #333333;
		}

		&-date {
			font-size: 20upx;
			color: #999999;
			position: absolute;
			right: 0upx;
			bottom: 0;
		}

		&-user {
			display: flex;
			align-items: center;

			&-picdir {
				width: 54upx;
				height: 54upx;
				border-radius: 50%;
				border: 2upx solid #b5b5b5;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			&-name {
				margin-left: 10upx;
				font-size: 22upx;
				color: #999999;
			}
		}

		&-status {
			font-size: 25upx;
			color: #999999;

			&.publish {
				color: #00cf7a;
			}

			&.audio {
				color: #fc637d;
			}
		}

		&-info {
			line-height: 1.5;

			&.addr {
				display: flex;

				view {
					font-size: 26upx;
					color: #666666;
				}
			}

			&-box {
				margin-top: 20upx;
			}

			text {
				font-size: 26upx;
				color: #666666;

				&.copy {
					color: #0180ff;
					margin-left: 10upx;
				}
			}
		}
	}
</style>
<style>
	.main-header {
		background: #6b7bf7 !important;
	}
</style>